<template>
  <view class="wd-flex wd-flex-col wd-flex-1">
    <view
      class="wd-w-750r"
      style="background-color: red"
      :style="{
        height: `${appSystemInfo.statusBarHeight}px`,
      }"
    />
    <view class="wd-w-750r wd-flex-center" style="background-color: green; height: 44px">
      <text class="wd-text-fff wd-text-18">导航栏</text>
    </view>
    <view
      class="wd-w-750r wd-flex-center wd-flex-col"
      style="background-color: blue; transition: all 2s"
      :style="{
        height: `${appSystemInfo.screenHeight - appSystemInfo.statusBarHeight - 44}px`,
      }"
    >
      <view>
        <text class="wd-text-fff wd-text-18">windowHeight: {{ appSystemInfo.windowHeight }}</text>
      </view>
      <view>
        <text class="wd-text-fff wd-text-18">screenHeight: {{ appSystemInfo.screenHeight }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PageUniAppPageHeight',
}
</script>

<style lang="scss" scoped></style>
